<div ng-controller="Umbraco.PropertyEditors.MultiUrlPickerController" class="umb-editor umb-contentpicker">
    <p ng-if="(renderModel|filter:{trashed:true}).length == 1"><localize key="contentPicker_pickedTrashedItem"></localize></p>
    <p ng-if="(renderModel|filter:{trashed:true}).length > 1"><localize key="contentPicker_pickedTrashedItems"></localize></p>

    <ng-form name="multiUrlPickerForm">
        <div ui-sortable="sortableOptions" ng-model="renderModel">
            <umb-node-preview
                ng-repeat="link in renderModel"
                icon="link.icon"
                name="link.name"
                published="link.published"
                description="link.url + (link.queryString ? link.queryString : '')"
                sortable="!sortableOptions.disabled"
                allow-remove="true"
                allow-edit="true"
                on-remove="remove($index)"
                on-edit="openLinkPicker(link, $index)">
            </umb-node-preview>
        </div>

        <a ng-show="!model.config.maxNumber || renderModel.length < model.config.maxNumber"
           class="umb-node-preview-add"
           href
           ng-click="openLinkPicker()"
           prevent-default>
            <localize key="general_add">Add</localize>
        </a>

        <div class="umb-contentpicker__min-max-help">

            <!-- Both min and max items -->
            <span ng-if="model.config.minNumber && model.config.maxNumber && model.config.minNumber !== model.config.maxNumber">
                <span ng-if="renderModel.length < model.config.maxNumber">Add between {{model.config.minNumber}} and {{model.config.maxNumber}} items</span>
                <span ng-if="renderModel.length > model.config.maxNumber">
                    <localize key="validation_maxCount">You can only have</localize> {{model.config.maxNumber}} <localize key="validation_itemsSelected"> items selected</localize>
                </span>
            </span>

            <!-- Equal min and max -->
            <span ng-if="model.config.minNumber && model.config.maxNumber && model.config.minNumber === model.config.maxNumber">
                <span ng-if="renderModel.length < model.config.maxNumber">Add {{model.config.minNumber - renderModel.length}} item(s)</span>
                <span ng-if="renderModel.length > model.config.maxNumber">
                    <localize key="validation_maxCount">You can only have</localize> {{model.config.maxNumber}} <localize key="validation_itemsSelected"> items selected</localize>
                </span>
            </span>

            <!-- Only max -->
            <span ng-if="!model.config.minNumber && model.config.maxNumber">
                <span ng-if="renderModel.length < model.config.maxNumber">Add up to {{model.config.maxNumber}} items</span>
                <span ng-if="renderModel.length > model.config.maxNumber">
                    <localize key="validation_maxCount">You can only have</localize> {{model.config.maxNumber}} <localize key="validation_itemsSelected">items selected</localize>
                </span>
            </span>

            <!-- Only min -->
            <span ng-if="model.config.minNumber && !model.config.maxNumber && renderModel.length < model.config.minNumber">
                Add at least {{model.config.minNumber}} item(s)
            </span>

        </div>

        <!--These are here because we need ng-form fields to validate against-->
        <input type="hidden" name="minCount" ng-model="renderModel" />
        <input type="hidden" name="maxCount" ng-model="renderModel" />

        <div class="help-inline" val-msg-for="minCount" val-toggle-msg="minCount">
            <localize key="validation_minCount">You need to add at least</localize> {{model.config.minNumber}} <localize key="validation_items">items</localize>
        </div>

        <div class="help-inline" val-msg-for="maxCount" val-toggle-msg="maxCount">
            <localize key="validation_maxCount">You can only have</localize> {{model.config.maxNumber}} <localize key="validation_itemsSelected">items selected</localize>
        </div>
    </ng-form>
    <umb-overlay ng-if="linkPickerOverlay.show"
                 model="linkPickerOverlay"
                 view="linkPickerOverlay.view"
                 position="right">
    </umb-overlay>
</div>
